<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <link rel="stylesheet" th:href="@{/static/css/minireset.css}" />
    <link rel="stylesheet" th:href="@{/static/css/common.css}" />
    <link rel="stylesheet" th:href="@{/static/css/cart.css}" />
    <script language="JavaScript" th:src="@{/static/script/vue.js}"></script>
    <script language="JavaScript" th:src="@{/static/script/axios.min.js}"></script>
    <script language="JavaScript" th:src="@{/static/script/cart.js}"></script>
    <base th:href="@{/}">
  </head>
  <body>
    <div class="header">
      <div class="w">
        <div class="header-left">
          <a th:href="@{/index.html}">
            <img th:src="@{/static/img/logo.gif}" alt=""
          /></a>
          <h1>我的购物车</h1>
        </div>
        <div class="header-right">
          <h3>用户：<span th:text="${session.currUser.uname}">张总</span></h3>
          <div class="order"><a th:href="@{/order.do(operate='getOrderList')}">我的订单</a></div>
          <div class="destory"><a th:href="@{/user.do(operate='cancel')}">注销</a></div>
          <div class="gohome">
            <a th:href="@{/book.do}">返回</a>
          </div>
        </div>
      </div>
    </div>
    <div class="list" id="cart_div">
      <div class="w">
        <table>
          <thead>
            <tr>
              <th>图片</th>
              <th>商品名称</th>
              <th>数量</th>
              <th>单价</th>
              <th>金额</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="cartItem in cart.cartItemMap">
              <td>
                <img :src="'static/uploads/' + cartItem.book.bookImg" alt="" />
              </td>
              <td>{{cartItem.book.bookName}}</td>
              <td>
                <span class="count" v-if="cartItem.buyCount !=1" @click="editCart(cartItem.id,cartItem.buyCount - 1)">-</span>
                <span>&nbsp;&nbsp;{{cartItem.buyCount}}&nbsp;&nbsp;</span>
                <span class="count" @click="editCart(cartItem.id,cartItem.buyCount + 1,cartItem.book.id)">+</span>
              </td>
              <td>{{cartItem.book.price}}</td>
              <td>{{cartItem.xj}}</td>
              <td><span style="cursor: pointer" @click="delCart(cartItem.id)">删除</span></td>
            </tr>

          </tbody>
        </table>
        <div class="footer">
          <div class="footer-left">
            <a href="#"  style="visibility: hidden" class="clear-cart">清空购物车</a>
            <a href="#" style="visibility: hidden">继续购物</a>
          </div>
          <div class="footer-right">
            <div>共<span >{{cart.totalBookCount}}</span>件商品</div>
            <div class="total-price">总金额<span>{{cart.totalMoney}}</span>元</div>
            <a class="pay" th:href="@{/order.do(operate='checkout')}">去结账</a>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>
